<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文件上传</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">

</head>

<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li class="divider"></li>
                            <li><a href="/">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        摆烂
                    </div>
                </li>
                <li>
                    <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li>
                    <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                </li>
                <li><a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i>浏览馆藏</a></li>
                <li>
                    <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                            class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminBook/listBook">查看图书</a></li>
                        <li><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span class="nav-label">管理用户</span><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                        <li><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">欢迎来到摆烂图书管理系统</span>
                    </li>
                    <li>
                        <a href="/">
                            <i class="fa fa-male"></i> 个人中心
                        </a>
                    </li>
                    <li>
                        <a href="/custom/logout">
                            <i class="fa fa-sign-out"></i> 退出登录
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>文件上传</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="/">首页</a>
                    </li>
                    <li class="active">
                        <strong>文件上传</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeIn">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>文件上传区域</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>

                        <div class="ibox-content">
                            <form id="my-awesome-dropzone" class="dropzone">
                                <div class="dropzone-previews"></div>
                                <a class="btn btn-info pull-left" href="https://takak1.oss-cn-qingdao.aliyuncs.com/%E8%AF%BE%E7%A8%8B%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E7%A4%BA%E4%BE%8B.xlsx">下载示例文件</a>
                                <button type="submit" class="btn btn-primary pull-right">上传Excel！</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer">
            <div class="pull-right">
                摆烂图书管理系统
            </div>
            <div>
                <strong>Copyright</strong> 摆烂联盟 &copy; 2022
            </div>
        </div>
    </div>
</div>



<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>

<!-- DROPZONE -->
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>


<script>
    $(document).ready(function(){

        Dropzone.options.myAwesomeDropzone = {
            url: "/customer/adminBook/upload",
            method: "post",
            acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            paramName:"Excel",
            autoProcessQueue: false,
            maxFiles: 1,


            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                });
                this.on("errormultiple", function(files, response) {
                });
            }

        }

    });
</script>

</body>

</html>
